<template>
    <div>
        <div class="outmain ba_f heighthv pad_20 bor_rad5">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>创建直播</span>
                </div>
            </div>
            <div class="mar_t20 flex-bet flex-y-top">
                <div class="flex-g-1">
                    <el-form ref="form" :model="form" label-width="180px">
                        <el-form-item label="直播类型" :required='true'>
                            <el-radio-group v-model="form.type">
                                <el-radio label="0">手机直播</el-radio>
                                <el-radio label="1" disabled>推流设备直播</el-radio>
                            </el-radio-group>
                            <div class="yb_margin lh16">通过"小程序直播"小程序开播</div>
                        </el-form-item>
                        <el-form-item label="直播间标题" :required='true' prop="name">
                            <el-input v-model="form.name" placeholder="请输入直播间标题"></el-input>
                        </el-form-item>
                        <el-form-item label="开播时间" :required='true'>
                            <el-date-picker
                                    v-model="timeData"
                                    type="datetimerange"
                                    align="right"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :default-time="['08:00:00', '20:00:00']">
                            </el-date-picker>
                            <div class="yb_margin lh25">
                                <p class="">开播时间段仅供参考，不是实际直播间可以开播的时间</p>
                                <p>开播时间需要在当前时间的10分钟后 并且 开始时间不能在 6 个月后,直播时间不能少于30分钟, 最长时间不能超过12个小时</p>
                            </div>
                        </el-form-item>
                        <el-form-item label="主播昵称" :required='true' prop="anchorName">
                            <el-input v-model="form.anchorName" placeholder="请输入主播昵称"></el-input>
                        </el-form-item>
                        <el-form-item label="主播微信号" :required='true' prop="anchorWechat">
                            <el-input v-model="form.anchorWechat" placeholder="请输入主播微信号"></el-input>
                        </el-form-item>
                        <div class="shuju_title mar_b20">
                            <div class="shuju_title_text">
                                <span>直播间设置</span>
                            </div>
                        </div>
                        <el-form-item label="允许评论">
                            <el-radio-group v-model="form.closeComment" :required='true'>
                                <el-radio label="0">是</el-radio>
                                <el-radio label="1">否</el-radio>
                            </el-radio-group>
                            <div class="yb_margin lh16">若关闭，直播开始后不允许开启</div>
                        </el-form-item>
<!--                        <el-form-item label="回放功能" :required='true'>-->
<!--                            <el-radio-group v-model="form.screenType">-->
<!--                                <el-radio label="1">开启</el-radio>-->
<!--                                <el-radio label="2">关闭</el-radio>-->
<!--                            </el-radio-group>-->
<!--                        </el-form-item>-->
                        <el-form-item label="展示方式" :required='true'>
                            <el-radio-group v-model="form.screenType">
                                <el-radio label="1">横屏</el-radio>
                                <el-radio label="0">竖屏</el-radio>
                            </el-radio-group>
                            <div class="yb_margin lh16">横屏：视频宽高比为16:9、4:3、1.85:1 ；竖屏：视频宽高比为9:16、2:3</div>
                        </el-form-item>
                        <el-form-item label="允许点赞" :required='true'>
                            <el-radio-group v-model="form.closeLike">
                                <el-radio label="0">是</el-radio>
                                <el-radio label="1">否</el-radio>
                            </el-radio-group>
                            <div class="yb_margin lh16">若关闭，直播开始后不允许开启</div>
                        </el-form-item>
                        <el-form-item label="开启货架" :required='true'>
                            <el-radio-group v-model="form.closeGoods">
                                <el-radio label="0">是</el-radio>
                                <el-radio label="1">否</el-radio>
                            </el-radio-group>
                            <div class="yb_margin lh16">若关闭，直播开始后不允许开启</div>
                        </el-form-item>
                        <el-form-item label="直播间封面"  :required='true'>
                            <div class="uploadSource bor_de rel flex" v-if="icon">
                                <label class="statusLabel curs" @mouseenter="enter(1)" @mouseleave="leave(1)">
                                    <i class="el-icon-check" ref="imgicon1"></i>
                                    <i class="el-icon-close" @click="deleteMultiImage(icon,1)"></i>
                                </label>
                                <img :src="icon" @click='test(1)' class="wid"/>
                            </div>
                            <div class="uploadSource flex-center curs" v-else @click='test(1)'>
                                <i class="el-icon-plus fon_40 color_d9"></i>
                            </div>
                            <div class="yb_margin">建议尺寸：1920×1080</div>
                        </el-form-item>
                        <el-form-item label="分享卡图片"  :required='true'>
                            <div class="uploadSource bor_de rel flex" v-if="icon2">
                                <label class="statusLabel curs" @mouseenter="enter(2)" @mouseleave="leave(2)">
                                    <i class="el-icon-check" ref="imgicon2"></i>
                                    <i class="el-icon-close" @click="deleteMultiImage(icon2,2)"></i>
                                </label>
                                <img :src="icon2" @click='test(2)' class="wid"/>
                            </div>
                            <div class="uploadSource flex-center curs" v-else @click='test(2)'>
                                <i class="el-icon-plus fon_40 color_d9"></i>
                            </div>
                            <div class="yb_margin">建议尺寸：800×640</div>
                        </el-form-item>
                        <el-form-item label="背景图片"  :required='true'>
                            <div class="uploadSource bor_de rel flex" v-if="icon3">
                                <label class="statusLabel curs" @mouseenter="enter(3)" @mouseleave="leave(3)">
                                    <i class="el-icon-check" ref="imgicon3"></i>
                                    <i class="el-icon-close" @click="deleteMultiImage(icon3,3)"></i>
                                </label>
                                <img :src="icon3" @click='test(3)' class="wid"/>
                            </div>
                            <div class="uploadSource flex-center curs" v-else @click='test(3)'>
                                <i class="el-icon-plus fon_40 color_d9"></i>
                            </div>
                            <div class="yb_margin">建议尺寸：800×640</div>
                        </el-form-item>
                    </el-form>
                </div>
<!--                <div class="flex-g-0 pad_lr_20">-->
<!--                    <div class="fon_16">常见问题</div>-->
<!--                    <el-collapse v-model="collapseName" accordion class="mar_tb10" style="width: 260px">-->
<!--                        <el-collapse-item title="什么是店铺满减？" name="1">-->
<!--                            <div>1. 点击同步直播间，可获取小程序直播房间列表信息（获取额度：100000次/一天（与获取回放接口共用次数），请合理分配和获取次数）。</div>-->
<!--                        </el-collapse-item>-->
<!--                        <el-collapse-item title="为什么要设置店铺满减？" name="2">-->
<!--                            <div>店铺满减可帮助店铺在排名列表中加权，为店铺引流，合理的配置可有效撬动用户下单，提高进店率及转化率。</div>-->
<!--                        </el-collapse-item>-->
<!--                        <el-collapse-item title="店铺满减将在哪里展示" name="3">-->
<!--                            <div>商户列表页；商户主页；筛选列表；相关活动页</div>-->
<!--                        </el-collapse-item>-->
<!--                    </el-collapse>-->
<!--                    <div class="fon_16 mar_t20">活动规则</div>-->
<!--                    <div class="color_9 mar_t10 lh30 fon_13">-->
<!--                        <div>1.活动仅限在线支付订单；</div>-->
<!--                        <div>2.活动成本由商家承担，与店铺其他活动默认同享</div>-->
<!--                    </div>-->
<!--                </div>-->
            </div>
        </div>
        <attachment-img ref="img1" type="img" @attachment='imgadd1'></attachment-img>
        <attachment-img ref="img2" type="img" @attachment='imgadd2'></attachment-img>
        <attachment-img ref="img3" type="img" @attachment='imgadd3'></attachment-img>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="submitForm">立即创建</el-button>
        </div>
    </div>
</template>
<script>
    import attachmentImg from "@/plugins/attachment-img";
    import {creatLive,getsaveReduce,getMediaid} from "@/api/plug";
    import {changeDate} from "@/utils/index";

    export default {
        components: {attachmentImg,},
        created() {
            if (this.$route.query.id) {
                this.id = this.$route.query.id
                this.edit()
            }
        },
        data() {
            return {
                form: {
                    name: '',
                    feedsImg: '',
                    type: '0',
                    screenType: '1',
                    anchorName: '',
                    anchorWechat: '',
                    shareImg: '',
                    coverImg: '',
                    closeLike: '0',
                    closeGoods: '0',
                    closeComment: '0',
                },
                icon:'',
                icon2:'',
                icon3:'',
                timeData:[new Date(),new Date().setMonth(new Date().getMonth() + 3)],
                collapseName: '',
            }
        },
        methods: {
            enter(i=0){
                this.$refs['imgicon' + i].style.display = 'none'
            },
            leave(i=0){
                this.$refs['imgicon' + i].style.display = 'inline-block'
            },
            test(i = 0) {
                console.log(this.$refs, i)
                this.$refs['img' + i].dialogVisible = true
            },
            imgadd1(url) {
                this.icon = url.str
                this.UrlToWxImg1(this.icon)
            },
            imgadd2(url) {
                this.icon2 = url.str
                this.UrlToWxImg2(this.icon2)
            },
            imgadd3(url) {
                this.icon3 = url.str
                this.UrlToWxImg3(this.icon3)
            },
            deleteMultiImage(item, index, type) {
                //typem没传是单图multigraph多图；index上传图片组件排序
                Array.prototype.remove = function (val) {
                    var index = this.indexOf(val);
                    if (index > -1) {
                        this.splice(index, 1);
                    }
                };
                if (type == 'multigraph') {
                    switch (index) {
                        case 2:
                            this.form2.environment.remove(item);
                            break
                    }
                } else {
                    switch (index) {
                        case 1:
                            this.icon = '';
                            break
                        case 2:
                            this.icon2 = '';
                            break
                        case 3:
                            this.icon3 = '';
                            break
                    }
                }
            },
            // async edit(){
            //     const {data} = await getsaveReduce({id: this.id})
            //     this.form2 = this.form
            //     this.form = Object.assign(this.form2, data);
            //     if(data.startTime){
            //         this.timeData = [data.startTime,data.endTime]
            //     }
            //     if (data.type=='2' && data.moneyArr) {
            //         this.moneyArr = data.moneyArr.map((v => ({fullMoney: v.fullMoney, money: v.money})))
            //     }if(data.type=='1'){
            //         this.moneyArr1 = data.moneyArr.map((v => ({fullMoney: v.fullMoney, money: v.money})))
            //     }
            // },
            async UrlToWxImg1(src){
                const {data} = await getMediaid({src,})
                this.form.feedsImg = data.media_id
            },
            async UrlToWxImg2(src){
                const {data} = await getMediaid({src,})
                this.form.shareImg = data.media_id
            },
            async UrlToWxImg3(src){
                const {data} = await getMediaid({src,})
                this.form.coverImg = data.media_id
            },
            async submitForm() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        console.log(this.form,this.timeData)
                        if(this.timeData){
                            this.form.startTime  = changeDate(this.timeData[0]);
                            this.form.endTime = changeDate(this.timeData[1]);
                        }
                        const {msg} = await creatLive(this.form);
                        this.$baseMessage(msg, "success");
                        this.$router.go(-1)
                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>
<style lang="scss">
    .time_item .el-input {
         width: 180px;
    }
</style>
